.rt-position-detail-modal {
  .am-modal-body {
    box-sizing: border-box;
    background-color: @color-background;
    color: @color-font;
    display: flex;
    flex-direction: column;
    .cm-scrollable-container {
      & > div {
        &:first-child {
          margin-top: 20px;
          border-top: 2px solid @color-border;
        }
      }
    }
    .rt-op-btn {
      font-size: 36px;
      padding: 26px 0;
      background-color: @color-up;
    }
  }
}

.rt-account-page-container {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: @color-border;
    & > div {
      display: flex;
      align-items: center;
      span {
        padding-right: 20px;
      }
    }
    i {
      font-size: 30px;
      color: @color-font-level-1;
    }
  }
  section {
    padding: 30px 0;
    background-color: @color-bg-level-2;
    margin-top: 14px;
    border-bottom: 2px solid @color-border;
    .rt-text-box {
      display: flex;
      font-size: 24px;
      align-items: baseline;
      padding: 0 32px;
      span {
        flex: 1;
        padding-left: 16px;
      }
      .-bold {
        font-weight: bold;
        font-size: 48px;
        color: @color-up;
        padding-top: 16px;
      }
      .rt-coupon-balance {
        font-size: 32px;
        color: @color-font-level-1;
      }
    }
    .rt-btn-group {
      display: flex;
      padding: 16px 0 0 0;
      & > div {
        width: 44%;
        margin-left: 4%;
        box-sizing: border-box;
        text-align: center;
        padding: 16px 0;
        border-radius: 8px;
        i {
          font-size: 38px;
          padding-right: 14px;
        }
      }
      .-recharge {
        background-color: @color-up;
      }
      .-withdraw {
        background-color: @color-bg-level-3;
      }
    }
  }
  .cm-scrollable-container {
    padding: 22px 0 24px;
  }
}

.rt-recharge-page-container {
  .cm-scrollable-container {
    & > section {
      margin-bottom: 40px;
    }
  }
  .rt-cue-message {
    background-color: @color-border;
    padding: 24px 0 24px 42px;
  }
  .rt-balance-box {
    padding: 44px 0 44px 36px;
  }
  .rt-payment-box {
    border-top: 2px solid @color-border;
    border-bottom: 2px solid @color-border;
    color: @color-font-level-1;
    display: flex;
    flex-direction: column;
    background-color: @color-bg-level-2;
    & > span {
      padding: 22px 0 34px 36px;
    }
    .rt-wrapper-box {
      display: flex;
      flex-wrap: wrap;
      & > div {
        border: 2px solid @color-border-level-2;
        background-color: @color-font;
        margin-left: 4%;
        box-sizing: border-box;
        width: 44%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        margin-bottom: 38px;
        box-sizing: border-box;
        height: 130px;
        &.-selected {
          border-color: #FFBF26;
          border-width: 4px;
          position: relative;
          .cm-right-angle-trangle-box {
            position: absolute;
            bottom: -1px;
            right: -1px;
          }
        }
      }
    }
  }
  .rt-next-step-tip {
    color: @color-font-level-1;
    font-size: 24px;
    text-align: center;
    padding-bottom: 28px;
  }
}

.rt-position-list-container {
  .rt-balance-box {
    padding: 22px 0 22px 36px;
    background-color: @color-bg-level-5;
  }
  .cm-scrollable-container {
    & > p {
      color: @color-font-level-1;
      font-size: 24px;
      padding-left: 36px;
    }
    & > section {
      border: 2px solid @color-border;
      margin: 0 20px 20px;
      background-color: @color-bg-level-2;
      & > div {
        display: flex;
      }
      .-above {
        border-bottom: 2px solid @color-border;
      }
      .-wrapper {
        width: 76%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 24px;
        color: @color-font-level-1;
        .-diff-color {
          color: @color-font;
          .-diff-size {
            font-size: 28px;
          }
          .rt-amount {
            padding: 0 10px;
          }
          .rt-updown-box {
            padding: 14px 16px;
            border-radius: 8px;
            background-color: @color-up;
            display: inline-block;
            margin: 14px 0;
          }
        }
      }
      .rt-rest-space {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .-delta-num {
          font-size: 32px;
          color: @color-up;
        }
        .-btn {
          background-color: @color-bg-level-5;
          color: @color-font-level-1;
          padding: 8px 30px;
          border-radius: 8px;
          margin: 16px 0;
        }
      }
    }
  }
}

.rt-position-operate-box {
  background-color: @color-background;
  & > header {
    background-color: @color-bg-level-2;
    display: flex;
    justify-content: space-between;
    font-size: 36px;
    padding: 26px 30px;
    .-symbol {
      font-size: 28px;
      padding-right: 12px;
    }
  }
  .-btn-box {
    text-align: center;
    font-size: 36px;
    padding: 30px 0;
    border-bottom: 2px solid @color-border;
  }
  .-cancle-box {
    text-align: center;
    padding: 22px 0;
    i {
      color: @color-up;
      font-size: 82px;
      background-color: @color-font;
      border-radius: 50%;
    }
  }
}

.rt-transaction-list-container {
  .rt-hint-message {
    border-bottom: 2px solid @color-border;
    padding: 12px 0 12px 50px;
  }
  .cm-scrollable-container {
    .-row-header-box {
      border-bottom: 2px solid @color-border;
      background-color: @color-bg-level-2;
      display: flex;
      font-size: 24px;
      padding: 40px 0;
      span {
        flex: 1;
        text-align: center;
      }
      .-date {
        flex: 1.5;
      }
      .-name {
        flex: 2;
      }
      .-delta {
        flex: 1.6;
      }
    }
    .-row-box {
      border-bottom: 2px solid @color-border;
      display: flex;
      align-items: center;
      padding: 18px 0;
      background-color: @color-bg-level-2;
      .-name {
        flex: 2;
      }
      .-updown-box {
        font-size: 24px;
        display: flex;
        justify-content: center;
        span {
          padding: 14px 16px;
          background-color: @color-up;
          border-radius: 6px;
        }
      }
      .-delta-num {
        color: @color-up;
        text-align: center;
        flex: 1.6;
      }
      & > div, & > span, i {
        flex: 1;
        text-align: center;
      }
      time {
        flex: 1.5;
        text-align: center;
      }
    }
  }
}

.rt-transaction-detail-modal {
  .am-modal-body {
    display: flex;
    flex-direction: column;
    .cm-scrollable-container {
      .-row {
        border-bottom: 1px solid @color-border;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: @color-bg-level-2;
        padding: 28px 46px;
        &.-first {
          border-top: 2px solid @color-border;
          margin-top: 20px;
        }
        .-diff {
          font-size: 32px;
          color: @color-font-level-1;
        }
        i {
          color: @color-font-level-1;
          font-size: 44px;
        }
      }
      .-border-status {
        border-bottom: 0;
      }
      .-table {
        padding-bottom: 40px;
        background-color: @color-bg-level-2;
        .-tr {
          border: 2px solid @color-border;
          border-top: 0;
          margin: 0 5%;
          display: flex;
          &.-header {
            background-color: @color-bg-level-5;
          }
          span {
            flex: 1;
            text-align: center;
            padding: 22px 0;
          }
          .-time {
            flex: 2;
          }
        }
      }
    }
  }
}

.rt-in-out-page-container {
  .-hint-message {
    font-size: 24px;
    color: @color-font-level-4;
    padding: 18px 0 18px 42px;
  }
  .cm-scrollable-container {
    .rt-in-out {
      border: 2px solid @color-border;
      border-bottom: 4px solid @color-up;
      background-color: @color-bg-level-2;
      margin: 0 20px 20px;
      display: flex;
      justify-content: space-between;
      padding: 24px 38px;
      .-left {
        display: flex;
        flex-direction: column;
      }
      .-right {
        display: flex;
        align-items: center;
        & > div {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          padding-right: 26px;
          .-symbol {
            padding-bottom: 24px;
          }
        }
      }
      .-delta {
        font-size: 40px;
        color: @color-up;
        padding-bottom: 24px;
      }
      i {
        color: @color-font-level-1;
      }
    }
  }
}

.rt-in-out-detail-modal {
  .am-modal-body {
    display: flex;
    flex-direction: column;
    .cm-scrollable-container {
      .-row {
        border-bottom: 2px solid @color-border;
        display: flex;
        justify-content: space-between;
        padding: 32px 46px;
        background-color: @color-bg-level-2;
        .-diff {
          font-size: 32px;
          color: @color-font-level-1;
        }
      }
      .-first {
        border-top: 2px solid @color-border;
        margin-top: 20px;
      }
    }
  }
}

.rt-gift-coupon-container {
  .cm-scrollable-container {
    .rt-gift-coupon {
      .card;
      .cm-left-circle {
        position: absolute;
        top: 70px;
      }
      .cm-right-circle {
        position: absolute;
        top: 70px;
        right: 0;
      }
      .-above {
        font-size: 32px;
        padding: 26px 0 26px 20px;
        border-bottom: 2px solid rgba(255, 255, 255, .3);
      }
      .-below {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 26px 48px 16px 20px;
        .-left {
          font-size: 24px;
          display: flex;
          flex-direction: column;
          time {
            padding-top: 10px;
          }
        }
        .-right {
          span {
            font-size: 36px;
          }
          strong {
            font-size: 72px;
            padding-left: 24px;
          }
        }
      }
    }
    .-first {
      margin-top: 26px;
    }
  }
}

.rt-exp-ticket-container {
  .cm-tabs-box {
    span {
      color: #6E6E6E;
    }
    .-active {
      color: @color-yellow;
    }
  }
  .cm-scrollable-container {
    .rt-exp-ticket {
      .card; // mixins
      &::after, &::before {
        top: 76px;
      }
      &.-grey {
        img {
          position: absolute;
          height: 100%;
          top: 0;
          right: 40px;
          background-color: @color-bg-level-2;
        }
      }
      &.-first {
        margin-top: 20px;
      }
      .-above {
        font-size: 40px;
        padding: 24px 0 24px 24px;
        border-bottom: 2px solid rgba(255, 255, 255, .3);
      }
      .-below {
        font-size: 24px;
        padding: 28px 0 28px 24px;
      }
      .-op-btn {
        border: 2px solid #E8896B;
        border-radius: 6px;
        background-color: @color-up;
        position: absolute;
        font-size: 24px;
        top: 68px;
        right: 40px;
        padding: 12px 18px;
      }
    }
  }
}

.rt-bankcard-list-container {
  .cm-scrollable-container {
    .rt-bankcard {
      border: 2px solid @color-border;
      margin: 0 20px 28px;
      color: @color-font-level-1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 44px 28px;
      background-color: @color-bg-level-2;
      border-radius: 8px;
      border-bottom: 12px solid @color-up;
      .-left {
        display: flex;
        flex-direction: column;
      }
      .-right {
        padding: 18px 36px;
        background-color: @color-bg-level-5;
        border-radius: 6px;
      }
      .-name {
        font-size: 32px;
        color: @color-up;
        padding-bottom: 28px;
      }
    }
    .-first {
      margin-top: 26px;
    }
    .-adjunction-box {
      border: 2px solid @color-border;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: @color-font-level-1;
      margin: 0 20px 28px;
      padding: 32px 0;
      background-color: @color-bg-level-2;
      border-radius: 8px;
      i {
        font-size: 62px;
        margin-bottom: 14px;
      }
    }
  }
}

.rt-adjunction-bankcard-modal {
  .am-modal-body {
    display: flex;
    flex-direction: column;
    .cm-picker-box {
      margin-top: 30px;
    }
  }
}

.rt-withdraw-container {
  .-message {
    padding: 24px 38px;
    line-height: 1.4;
    background-color: @color-bg-level-5;
  }
  p.-money {
    padding-left: 42px;
  }
  .-margin-top {
    margin-top: 68px;
  }
}

.rt-recharge-result-container {
  .cm-scrollable-container {
    text-align: center;
    padding-top: 62px;
    i {
      font-size: 146px;
      color: @color-up;
      background-color: @color-font;
      border-radius: 50%;
      box-sizing: border-box;
    }
    .anticon-check-circle {
      color: #12CF74;
    }
    .-middle {
      font-size: 48px;
      padding: 28px 0 14px;
    }
    .-below {
      font-size: 34px;
      color: @color-font-level-1;
      padding-bottom: 52px;
    }
    .-row-wrapper {
      padding-bottom: 34px;
      .-row {
        display: flex;
        justify-content: space-between;
        font-size: 32px;
        padding: 32px 46px;
        background-color: @color-bg-level-2;
        border-bottom: 1px solid @color-border;
        .-lft {
          color: @color-font-level-1;
        }
      }
    }
  }
}